{extend name='common/common' /}

{block name="style"}
<link href="__CSS__/bootstrap.min.css?v=3.3.6" rel="stylesheet">
<style media="screen">
	.el-card__body{
		overflow-x: auto;
	}
</style>
{/block}

{block name="content"}
<el-card class="box-card">
	<div slot="header">
		<span class="span-primary"><i class="fa fa-table"></i></span>
		<span class="span-warning">{$Company.name}</span>
		日报表填报
	</div>
	<div class="el-card-content">
		<el-form :model="form" :rules="rules" ref="form_ref" inline>
			<el-form-item label="填报人" prop="link_man">
				<el-input v-model="form.link_man" size="mini"></el-input>
			</el-form-item>
			<el-form-item label="联系电话" prop="link_type">
				<el-input v-model="form.link_type" size="mini"></el-input>
			</el-form-item>
			<el-form-item label="报表日期" prop="rpt_date">
				<el-date-picker size="mini" type="date"
					v-model="form.rpt_date" value-format="timestamp" disabled>
				</el-date-picker>
			</el-form-item>
			<table class="table table-bordered table-striped text-center" style="min-width:1500px;">
				<tbody>
					<tr>
						<th width="50" class="text-center">序号</th>
						<th class="text-center">站点编码</th>
						<th class="text-center">站点名称</th>
						<th width="150" class="text-center">站点类型</th>
						<th width="150" class="text-center">代买商品类别</th>
						<th width="150" class="text-center">代买总金额（元）</th>
						<th width="150" class="text-center">代买总订单数（笔）</th>
						<th width="150" class="text-center">代卖商品类别</th>
						<th width="150" class="text-center">代卖总金额（元）</th>
						<th width="150" class="text-center">代卖总订单数（笔）</th>
						<th width="50" class="text-center">操作</th>
					</tr>
					<tr v-for="(v, index) in form.content">
						<td>{{index + 1}}</td>
						<td>{{v.code}}</td>
						<td>{{v.name}}</td>
						<td>
							<el-select v-model="v.countyType" placeholder="请选择" size="mini">
								<el-option label="县级服务中心" value="1"></el-option>
								<el-option label="乡镇级服务站" value="2"></el-option>
								<el-option label="村级服务站" value="3"></el-option>
							</el-select>
						</td>
						<td>
							<el-select v-model="v.serviceStationCommodity[0].commId" placeholder="请选择" size="mini">
								{volist name="Buy" id="b"}
								<el-option label="{$b.name}" value="{$b.commid}"></el-option>
								{/volist}
							</el-select>
						</td>
						<td>
							<el-input size="mini" v-model="v.serviceStationCommodity[0].money"
								type="number" min="0">
							</el-input>
						</td>
						<td>
							<el-input size="mini" v-model="v.buyOrder"
								type="number" min="0">
							</el-input>
						</td>
						<td>
							<el-select v-model="v.serviceStationCommodity[1].commId" placeholder="请选择" size="mini">
								{volist name="Sell" id="s"}
								<el-option label="{$s.name}" value="{$s.commid_2}"></el-option>
								{/volist}
							</el-select>
						</td>
						<td>
							<el-input size="mini" v-model="v.serviceStationCommodity[1].money"
								type="number" min="0">
							</el-input>
						</td>
						<td>
							<el-input size="mini" v-model="v.saleOrder"
								type="number" min="0">
							</el-input>
						</td>
						<td>
							<el-button type="danger" icon="el-icon-delete"
								size="mini" circle plain
								@click="delRow(index,v)">
							</el-button>
						</td>
					</tr>
					<tr>
						<td colspan="11">
							<el-button type="info" size="mini" @click="addRow">
								添加
							</el-button>
						</td>
					</tr>
				</tbody>
			</table>
			<p class="text-center">
				<el-button type="primary" plain @click="saveTable">保存表格</el-button>
			</p>
		</el-form>
	</div>
</el-card>
{/block}

{block name="script"}
<script type="text/javascript">
var main = new Vue({
	el:"#main",
	data:{
		loading:false,
		form:{
			userId:"{$Company.government_uname}",
			depart_id:"{$Company.depart_id}",
			depart_name:"{$Company.depart_name}",
			company_id:"{$Company.id}",
			create_uid:"{$Company.uid}",
			link_man:"{$table.link_man|default=''}",
			link_type:"{$table.link_type|default=''}",
			rpt_date:"{$table.rpt_date}"*1000,
			content:[{
				code:"{$Company.code}",name:"{$Company.name}",countyType:"",
				buyOrder:"",saleOrder:"",
				serviceStationCommodity:[{commId:"",money:""},{commId:"",money:""}],
			}]
		},
		rules:{
			link_man:[{required:true,message:'填报人不能为空',trigger:['blur','change']}],
			link_type:[{required:true,message:'联系电话不能为空',trigger:['blur','change']}],
			rpt_date:[{required:true,message:'报表日期不能为空',trigger:['blur','change']}],
		}
	},
	mounted:function() {
		this.getForm_content();
	},
	methods:{
		getForm_content() {
			$.post('{:url("Tablequery/getDayFormCT")}',{
				table_id:"{$table.id}"
			},function(res) {
				if(res.code == 1){
					main.form.content = res.data;
				}else{
					main.$notify.error({title:"错误",message:"获取失败"});
				}
			});
		},
		delRow(index) {
			this.$confirm('除填写错误外，禁止删除！确定还要删除数据吗？', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				if (index !== 0) {
					this.form.content.splice(index, 1)
				}else{
					this.$alert('第一行不能删除哦', '错误',{
						type:"error",showClose:false
					})
				}
			}).catch(() => {});
		},
		addRow() {
			this.form.content.push({
				code:"{$Company.code}",name:"{$Company.name}",countyType:"",
				buyOrder:"",saleOrder:"",
				serviceStationCommodity:[{commId:"",money:""},{commId:"",money:""}],
			});
		},
		saveTable() {
			this.$refs['form_ref'].validate((valid) => {
				if(valid){
					var param = this.form;
					$.post('{:url("Commit/saveDay")}',param,function(res) {
						if(res.code == 1){
							main.$notify({title:"成功",type:"success",message:res.msg});
						}else{
							main.$notify.error({title:"错误",message:res.msg});
						}
					});
				}
			});
		}
	}
})
</script>
{/block}
